<template>
    <div>
        <div class="body">
            <div class="phone">
                <div class="phone1">
                    <div class="top_nav">
                        <span>{{ $i18(name, '应用标题') }}</span>
                    </div>
                    <div class="phone_body">
                        <vuedraggable class="wrapper" v-model="portalList">
                            <transition-group>
                                <div class="mobile-portal" :class="[portId==index?'mobile-portal-show':'']"
                                     v-for="(portal,index) in portalList" :key="index" @click="onEditor(portal,index)">
                                    <div class="mobile-portal-iconfont">
                                        <my-icon type="iconshanchu" @click="del(index)"></my-icon>
                                        <my-icon type="iconshangjiantou-01" @click="up(index)"></my-icon>
                                        <my-icon type="iconxiajiantou" @click="down(index)"></my-icon>
                                        <my-icon type="iconzhiding1" @click="toTop(index)"></my-icon>
                                        <my-icon type="iconzhidi1" @click="toBottom(index)"></my-icon>
                                    </div>
                                    <div v-if="portal.type=='wheel'" ref="wheel">
                                        <a-carousel autoplay height="130px">
                                            <div v-for="(item,index) in portal.items" :key="index">
                                                <img v-if="item.fileId" class="img" :src="imageUrl(item.fileId)"/>
                                                <img v-else class="img" src="@/image/image.png"/>
                                            </div>
                                        </a-carousel>
                                    </div>
                                    <!-- 流程管理 -->
                                    <div v-else-if="portal.type=='process' || portal.type=='largeScreen'"
                                         class="gridtitle highlight" ref="gridtitle">
                                        <div class="title" v-if="portal.titleflg == true">
                                            <span>{{ getItemTitleVal(portal) }}</span>
                                        </div>
                                        <div class="grid">
                                            <div class="item" v-for="(item,index) in portal.items" :key="index">
                                                <div v-if="portal.stylize=='img'">
                                                    <img v-if="item.imgId" class="initSubItem-img"
                                                         :src="getFilePath(item.imgId)" alt="photo"></img>
                                                    <img v-else class="initSubItem-img" src="@/image/mobile.png"></img>
                                                </div>
                                                <div v-else class="divIcon" :style="{'background':item.bgColor}">
                                                    <my-icon :type="item.icon"></my-icon>
                                                </div>
                                                <div class="span">{{ getItemTitleVal(item) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 栏目 -->
                                    <div v-else-if="portal.type=='grid'" class="gridtitle highlight" ref="gridtitle">
                                        <div class="title" v-if="portal.titleflg == true">
                                            <span>{{ getItemTitleVal(portal) }}</span>
                                        </div>
                                        <div class="grid">
                                            <div class="item" v-for="(item,index) in portal.items" :key="index">
                                                <div v-if="portal.stylize=='img'">
                                                    <img v-if="item.imgId" class="initSubItem-img"
                                                         :src="getFilePath(item.imgId)" alt="photo"></img>
                                                    <img v-else class="initSubItem-img" src="@/image/mobile.png"></img>
                                                </div>
                                                <div v-else class="divIcon" :style="{'background':item.bgColor}">
                                                    <my-icon :type="item.icon"></my-icon>
                                                </div>
                                                <div class="span">{{ getItemTitleVal(item) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else-if="portal.type=='notice'" class="notice highlight" ref="coment">
                                        <rx-news :num="portal.noticeNum"/>
                                    </div>
                                    <!-- tab -->
                                    <div v-else-if="portal.type =='tab'" class="gridtitle highlight" ref="tabcolumn">
                                        <div class="title" v-if="portal.titleflg == true">
                                            <span>{{ getItemTitleVal(portal) }}</span>
                                        </div>
                                        <div>
                                            <a-tabs default-active-key="0">
                                                <a-tab-pane v-for="(tablist,index) in portal.tabs" :key="index"
                                                            :tab="getItemTitleVal(tablist)">
                                                    <div class="grid">
                                                        <div class="item" v-for="(item,index1) in tablist.items"
                                                             :key="index1">
                                                            <div v-if="tablist.stylize=='img'">
                                                                <img v-if="item.imgId" class="initSubItem-img"
                                                                     :src="getFilePath(item.imgId)" alt="photo"></img>
                                                                <img v-else class="initSubItem-img"
                                                                     src="@/image/mobile.png"></img>
                                                            </div>
                                                            <div v-else class="divIcon" :style="{'background':item.bgColor}">
                                                                <my-icon :type="item.icon"></my-icon>
                                                            </div>
                                                            <div class="span">{{ getItemTitleVal(item) }}</div>
                                                        </div>
                                                    </div>
                                                </a-tab-pane>
                                            </a-tabs>
                                        </div>
                                    </div>
                                    <!--  自定义页面栏目 -->
                                    <div v-else-if="portal.type=='customColumn'" class="notice highlight">
                                        <custom-page-show :config="portal" type="mobile"
                                                          :showComponent="true"></custom-page-show>
                                    </div>
                                </div>
                            </transition-group>
                        </vuedraggable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import entry from "./entry.js";
import rxNews from './rxNews';
import vuedraggable from 'rx-vuedraggable';
import InsPortalDefApi from '@/api/portal/core/insPortalDef'
import CustomPageColumnDialog from "@/views/modules/portal/core/CustomPageColumnDialog";
import CustomPageShow from "@/views/modules/portal/core/CustomPageShow";
import {Util, I18Parse, TokenUtil} from "@lowcode/jpaas-common-lib";

export default {
    data() {
        return {
            // 轮播图
            portalList: [],
            type: "",
            name: "",
            portal: {},
            portId: 0,
            processI18ns: {
                "i18nJson": {
                    "zh-CN": "流程管理",
                    "en-US": "ProcessMatter",
                    "ja-JP": "プロセスマネジメント",
                    "es-ES": "Gestión de procesos"
                },
                "myTasks": {
                    "zh-CN": "我的待办",
                    "en-US": "MyTaskList",
                    "ja-JP": "私のタスクリスト",
                    "es-ES": "Mi lista de tareas"
                },
                "mySolutions": {
                    "zh-CN": "新建流程",
                    "en-US": "NewProcess",
                    "ja-JP": "新しいプロセス",
                    "es-ES": "Nuevo proceso"
                },
                "news": {
                    "zh-CN": "我的消息",
                    "en-US": "MyMessage",
                    "ja-JP": "私のメッセージ",
                    "es-ES": "Mis mensajes"
                },
                "myInst": {
                    "zh-CN": "我的申请",
                    "en-US": "MyStartedItems",
                    "ja-JP": "私の申請",
                    "es-ES": "Mis solicitudes"
                },
                "HasHandle": {
                    "zh-CN": "我的已办",
                    "en-US": "MyHandledItems",
                    "ja-JP": "私の処理済みアイテム",
                    "es-ES": "Mis elementos manejados"
                },
                "ReceiveTask": {
                    "zh-CN": "收到的转办",
                    "en-US": "ReceivedTransmiteds",
                    "ja-JP": "受け取った転送",
                    "es-ES": "Tareas recibidas"
                },
                "TransOutTask": {
                    "zh-CN": "我的转办",
                    "en-US": "MyTransmiteds",
                    "ja-JP": "私の転送",
                    "es-ES": "Mis tareas transferidas"
                },
                "MyTransmit": {
                    "zh-CN": "我的转发",
                    "en-US": "MyForwarding",
                    "ja-JP": "私の転送",
                    "es-ES": "Mis reenvíos"
                },
                "ReceiveTransmit": {
                    "zh-CN": "我收到的转发",
                    "en-US": "ReceivedForwarding",
                    "ja-JP": "受け取った転送",
                    "es-ES": "Reenvíos recibidos"
                },
                "MyTracked": {
                    "zh-CN": "我的跟踪",
                    "en-US": "MyTracks",
                    "ja-JP": "私のトラッキング",
                    "es-ES": "Mis seguimientos"
                },
                "myPending": {
                    "zh-CN": "我的挂起",
                    "en-US": "MyPendings",
                    "ja-JP": "私の保留",
                    "es-ES": "Mis pendientes"
                },
                "asynchronous": {
                    "zh-CN": "我的异步",
                    "en-US": "AsyncTasks",
                    "ja-JP": "私の非同期タスク",
                    "es-ES": "Mis tareas asíncronas"
                }
            },
            largeScreenI18ns: {
                "i18nJson": {
                    "zh-CN": "大屏管理",
                    "en-US": "BI-Screen",
                    "ja-JP": "BIスクリーン",
                    "es-ES": "Pantalla BI"
                },
                "myCollection": {
                    "zh-CN": "我的收藏",
                    "en-US": "MyCollect",
                    "ja-JP": "私のコレクション",
                    "es-ES": "Mi colección"
                },
                "myShare": {
                    "zh-CN": "我的分享",
                    "en-US": "MyShare",
                    "ja-JP": "私のシェア",
                    "es-ES": "Mi compartir"
                }
            }
        }
    },
    components: {
        rxNews,
        vuedraggable,
        CustomPageShow
    },
    props: {
        pkId: {
            type: String
        }
    },

    inject: ['editsunbom'],
    mounted() {
    },
    computed: {},
    created() {
        this.getPortalList();
        this.getCurrentI18n();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "insPortalDef", key);
        },
        getItemTitleVal(item) {
            let title = this.$i18(item.i18nJson, item.title) || item.title;
            return title;
        },
        getlanmu(value) {
            if (value == '') {
                return this.i18n('portalMobile.grid', '栏目')
            } else {
                return value
            }
        },
        getFilePath(fileId) {
            let token = TokenUtil.getToken();
            fileId=Util.encryptWord(fileId);
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        },
        addBasic(type) {
            if (type == 'wheel') {
                var item = JSON.parse(JSON.stringify(entry.wheelEntry));
                this.portalList.push(item);
            } else if (type == 'grid') {
                var item = JSON.parse(JSON.stringify(entry.gridEntry));
                this.portalList.push(item);
            } else if (type == 'notice') {
                var item = JSON.parse(JSON.stringify(entry.noticeEntry));
                this.portalList.push(item);
            } else if (type == 'process') {//流程组件
                var item = JSON.parse(JSON.stringify(entry.processEntry));
                this.setI18n(item, this.processI18ns)
                this.portalList.push(item);
            } else if (type == 'tab') {
                var item = JSON.parse(JSON.stringify(entry.tabcolumn));
                this.portalList.push(item);
            } else if (type == 'customColumn') {
                this.addCustomColumn();
            } else if (type == 'largeScreen') {
                //添加大屏栏目
                let largeScreen = JSON.parse(JSON.stringify(entry.largeScreen));
                this.setI18n(largeScreen, this.largeScreenI18ns)
                this.portalList.push(largeScreen);
            }
        },
        setI18n(item, i18Ary) {
            var i18nItem = []
            if (item && item.items.length > 0) {
                for (let process of item.items) {
                    this.loadInitBtnI18nVal(process, "title")
                    this.setOtherDefaultI18nVal(process, i18Ary);
                    i18nItem.push(process)
                }
                item.items = []
                item.items = i18nItem
                item.i18nJson = JSON.stringify(i18Ary.i18nJson);
            }
        },
        getCurrentI18n() {
            this.i18nCurrent = window.localStorage.getItem("language");
            if (!this.i18nCurrent) {
                this.i18nCurrent = this.i18nDefault;
            }
        },
        loadInitBtnI18nVal(obj, text) {
            if (!obj.i18nJson) {
                let i18nJson = {};
                i18nJson[this.i18nCurrent] = obj[text];
                obj.i18nJson = JSON.stringify(i18nJson);
                return;
            }
            var i18nJson = obj.i18nJson;
            if (typeof i18nJson == "string") {
                i18nJson = JSON.parse(obj.i18nJson);
            }
            let val = i18nJson[this.i18nCurrent];
            if (!val) {
                return;
            }
            obj[text] = val;
        },
        //设置中文、英文默认值
        setOtherDefaultI18nVal(btn, ary) {
            let langs = I18Parse.handleLanList();
            if (!langs || langs.length == 0) {
                return;
            }
            let self_ = this;
            langs.forEach(lang => {
                if (lang != this.i18nCurrent) {
                    let langVal = ary[btn.routeName];
                    if (langVal) {
                        var i18nJson = btn.i18nJson;
                        if (typeof i18nJson == "string") {
                            i18nJson = JSON.parse(btn.i18nJson);
                        }
                        i18nJson[lang] = langVal[lang];
                        btn.i18nJson = JSON.stringify(i18nJson);
                    }
                }
            })

        },
        toTop(index) {
            this.portalList.unshift(this.portalList[index]);
            this.portalList.splice(index + 1, 1);
        },
        up(index) {
            this.switchItem(index - 1);
        },
        down(index) {
            this.switchItem(index);
        },
        toBottom(index) {
            this.portalList.push(this.portalList[index]);
            this.portalList.splice(index, 1);
        },
        del(index) {
            var self = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips', '操作提示'),
                content: this.$ti18('rxMsa.delInfo', '您确定需要删除'),
                okText: this.$ti18('rxForm.okBtn', '确认'),
                cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                zIndex: 99999,
                onOk() {
                    self.portalList.splice(index, 1);
                },
                onCancel() {
                }
            })
        },
        switchItem(index) {
            let arr = this.portalList.splice(index, 2);
            this.portalList.splice(index, 0, ...arr.reverse());
        },
        imageUrl(fileId) {
            var accessToken = TokenUtil.getToken();
            return `/api/api-system/system/core/sysFile/downloadScale/${fileId}?accessToken=` + accessToken;
        },
        // 传值判断当前点击是什么
        onEditor(item, index) {
            this.portId = index;
            this.editsunbom();
            this.$emit("itemedit", item);
        },
        bgColor(item) {
            return "backgroud-color:" + item.bgColor;
        },
        getPortalList() {
            InsPortalDefApi.get(this.pkId).then(res => {
                var layoutHtml = res.data.layoutHtml;
                this.portalList = layoutHtml ? JSON.parse(layoutHtml) : [];
                if (this.portalList.length > 0) {
                    this.onEditor(this.portalList[0], 0)
                }
                this.name = res.data.name;
                this.portal = res.data;
            })
        },
        save() {
            var portId = this.pkId;
            if (!portId) {
                this.$message.error(this.i18n('msa.pkIdTips', 'id不能为空！'));
                return;
            }
            var portalStr = JSON.stringify(this.portalList);
            var params = this.portal;
            params.layoutHtml = portalStr
            InsPortalDefApi.save(params).then(res => {
                if (res.success) {
                    this.$emit("cancel")
                }
            })

        },
        addCustomColumn() {
            var self = this;
            Util.open({
                component: CustomPageColumnDialog,
                curVm: this,
                title: this.i18n('portalMobile.customColumnTitle', '自定义页面栏目'),
                widthHeight: ['750px', '500px'],
            }, function (action, data) {
                if (action != "ok") return;
                self.portalList.push({
                    type: "customColumn",
                    title: data.name,
                    alias: data.alias
                });
            });
        }
    }
}
</script>

<style scoped>
.initSubItem-img {
    height: 42px;
    width: 42px;
    object-fit: contain;
}

.mobile-portal-show {
    border: solid 2px #4285f4 !important;
}

.mobile-portal-iconfont {
    position: absolute;
    padding-left: 10px;
    top: 0px;
    right: 0px;
    font-size: 26px;
    cursor: pointer;
    display: none;
    width: 176px;
    height: 45px;
    line-height: 45px;
    background-color: #4285f4;
    border-radius: 0px 0px 0px 21px;
    z-index: 9999;
    box-sizing: border-box;
    color: white;
}

.mobile-portal-iconfont i {
    font-size: 28px;
    margin-right: 5px;
    opacity: 0.8;
}

.mobile-portal-iconfont i:hover {
    opacity: 1;
}

.mobile-portal {
    width: 100%;
    min-height: 100px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    border: solid 2px white;
    margin-top: 15px;
}

.mobile-portal:hover {
    border: solid 2px #4285f4;
}

.mobile-portal:hover .mobile-portal-iconfont {
    display: block;
}

.tabbuton {
    border-bottom: 2px solid #409eff;
    color: #409eff;
}

.tabhaer li {
    float: left;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px;
    margin-left: 5px;
    margin-bottom: 10px;
}

.tabhaer {
    overflow: hidden;
}

.helairt {
    overflow: hidden;
    clear: both;
}

.box {
    width: 150px;
    height: 40px;
    background-color: #434a55;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    padding-left: 20px;
    border: 1px solid #434a55;
}

.box img {
    margin-right: 10px;
}

.phone {
    width: 380px;
    height: 770px;
    margin: 0px auto;
    margin-top: 16px;
    background-position: center;
    background: url(../../../../image/sj.png);
    background-size: 100% 100%;
    overflow: hidden;
}

.phone1 {
    width: 330px;
    height: 698px;
    margin: 0px auto;
    overflow: hidden;
    margin-top: 49px;
    border-bottom-right-radius: 36px;
    border-bottom-left-radius: 36px;
}

.phone_body {
    height: 100%;
    margin: 0px auto;
    border-bottom-right-radius: 36px;
    border-bottom-left-radius: 36px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 2rem;
}

.top_nav {
    width: 100%;
    height: 35px;
    background-color: #434a55;
    text-align: center;
    box-sizing: border-box;
    line-height: 35px;

}

.top_nav span {

    color: white;
    font-size: 14px;
}

.wheel {
    width: 330px;
    height: 130px;
    box-sizing: border-box;
}

.img {
    width: 330px;

}

.gridtitle {
    box-sizing: border-box;
    height: auto;
    background-color: white;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.title, .notice .text {
    height: 45px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #eeeeee;
}

.title span, .notice .textspan {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

.grid .item {
    width: 20%;
    height: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.grid .item:hover {
    cursor: pointer;
}

.item .img1 {
    /*background-color: #afceee;*/
    border: 9px solid #afceee;
    border-radius: 10px;
}

.item .span {
    font-size: 13px;
}

.notice {
    width: 100%;
    height: auto;
    background-color: white;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.notice .item {
    width: 365px;
    height: 72px;
    display: flex;
    flex: 1;
    margin: 0px auto;
    padding-left: 20px;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
}

.item_text {
    width: 315px;
    height: 100%;
    display: flex;
    align-items: center;
}

.item_right {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 15px;
}

.item_img {
    width: 80px;
    height: 60px;
    box-sizing: border-box;
    margin-right: 10px;
}

.item_text_right {
    width: 100%;
}

.item_tit {
    width: 100%;
    font-size: 16px;
}

.item_dec {
    display: flex;
    margin-top: 10px;
}

.item_dec .user {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999999;
}

.item_dec .time {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999999;
    margin-left: 20px;
}

.img2 {
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.avatar {
    width: 80px;
    height: 60px;
    border-radius: 2px;
    display: block;
}

.redDashed {
    border: 1px dashed #f44336;
}

/*网格样式*/
.divIcon {
    border-radius: 4px;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 5px;
    background: #000c17;
}

.divIcon i {
    font-size: 24px;
    color: white;
}

</style>


